<template>
  <div class="app-container">
    <!--用户数据-->
    <div class="head-container">
      <crudOperation show="" :permission="permission" />
    </div>
    <!--表单渲染-->
    <el-drawer
      :visible.sync="crud.status.cu > 0"
      :before-close="crud.cancelCU"
      direction="rtl"
      :append-to-body="false"
      custom-class="common-drawer"
      size="450px"
      :show-close="false">
      <div slot="title" class="drawer-title">
        <span>{{ crud.status.title }}</span>
        <span class="el-icon-close" @click="crud.cancelCU" />
      </div>
      <div class="drawer-content">
        <el-scrollbar :native="false" :noresize="false" class="dark fix">
          <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="130px">
            <el-form-item label="资源名称" prop="name">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="资源地址" prop="url">
              <el-input v-model="form.url" />
            </el-form-item>
            <el-form-item label="描述" prop="description">
              <el-input v-model="form.description" />
            </el-form-item>
          </el-form>
        </el-scrollbar>
        <div class="fix-bottom">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </div>
    </el-drawer>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="crud.data"
      style="width: 100%;"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column
        v-if="columns.visible('name')"
        :show-overflow-tooltip="true"
        prop="name"
        label="资源名称"
      />
      <el-table-column
        v-if="columns.visible('url')"
        :show-overflow-tooltip="true"
        prop="url"
        label="资源地址"
      />
      <el-table-column
        v-if="columns.visible('description')"
        :show-overflow-tooltip="true"
        prop="description"
        label="描述"
      />
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <udOperation :data="scope.row" :permission="permission" />
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import crudResouce from '@/api/permission/resource'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import rrOperation from '@crud/RR.operation'

// crud交由presenter持有
const defaultCrud = CRUD({ title: '资源', url: '/admin/resource/list', crudMethod: { ...crudResouce }})
const defaultForm = {
  name: null,
  url: null,
  description: null
}
export default {
  name: 'SystemUser',
  components: { crudOperation, udOperation, pagination, rrOperation },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  // 数据字典
  // dicts: ['user_status'],
  data() {
    // 自定义验证
    return {
      permission: {
        add: ['admin', 'resource:add'],
        edit: ['admin', 'resource:edit'],
        del: ['admin', 'resource:del']
      },
      rules: {
        name: [{ required: true, message: '请输入资源名称', trigger: 'blur' }],
        url: [{ required: true, message: '请输入资源地址', trigger: 'blur' }]
      }
    }
  },
  created() {
  },
  methods: {
  }
}
</script>

<style scoped>
</style>
